<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" template="/main.xhtml">

	<ui:define name="menu">
		<li>
			<a href="cadastrarQuarto" class="nav ancora">Cadastrar Quartos</a>
		</li>
		<li>
			<a href="consolidarReserva" class="nav ancora">Reserva/Check-in</a>
		</li>
		<h:form>
			<li>
				<h:commandLink action="#{administradorAction.iniciaUnidadeAction}" value="Quartos" styleClass="nav"/>
			</li>
			<li>
				<h:commandLink value="Check-out" action="#{administradorAction.iniciaEstadiaAction}" styleClass="nav"/>
			</li>
		
			<li><h:commandLink action="#{administradorAction.logout()}"
					styleClass="nav ancora" value="Sair"
					rendered="#{administradorAction.admLogado}" />
			</li>
		</h:form>
	</ui:define>

	<ui:define name="conteudo">
		<h1 id="cadastrarQuarto" class="lugarAncora">Cadastrar Quarto</h1>

		<hr />

		<div id="cadastrarQuarto" class="linha divForm">
			<h:form id="formCadastrarQuarto">

				<div class="inputs">

					<label for="tipoQuarto">Tipo do Quarto:</label>
					<h:selectOneMenu value="#{quartoAction.quarto.tipoQuarto}" id="tipoQuarto" styleClass="inputCampos validate[required]">
						<f:selectItem itemLabel="Selecione...." />
						<f:selectItems value="#{quartoAction.tiposQuartos}" var="tipo"
							itemLabel="#{tipo}" itemValue="{tipo}" />
					</h:selectOneMenu>

					<label for="numeroQuarto">Numero do Quarto</label>
					<h:inputText value="#{quartoAction.quarto.numero}" id="numeroQuarto" styleClass="validate[required, custom[integer]]"/>

					
				</div>

				<h:commandButton value="Confirmar"
					action="#{quartoAction.cadastrarQuarto()}" title="Cadastrar Quarto"
					style="clear: both" />

			</h:form>
		</div>

		<h1 id="consolidarReserva" class="lugarAncora">
			Reserva/Check-in
		</h1>

		<hr />

		<div id="consolidarReserva" class="linha divForm">
			<h:form id="formReserva">

				<div class="inputs dadosReserva">
					
					<label>Tipo de entrada:</label>
				    <h:selectOneMenu value="#{reservarAction.tipoReserva}" id="tipoEntrada" styleClass="inputCampos validate[required]">
						<f:selectItem itemLabel="Selecione...." />
						<f:selectItems value="#{reservarAction.opcoes}"/>
					</h:selectOneMenu>
				
					<label>Número do Quarto:</label>
				    
				    <h:selectOneMenu value="#{reservarAction.numeroQuarto}" id="numeroQuarto" styleClass="inputCampos validate[required]">
						<f:selectItem itemLabel="Selecione...." />
						<f:selectItems value="#{reservarAction.listarQuartosDesocupados()}" />
					</h:selectOneMenu>
				    
				    <div class="inputLinha primeiro">
	
						<label>Data de entrada:</label>
						<h:inputText value="#{reservarAction.dataEntrada}" id="de" styleClass="validate[required] text-input datepicker">
				           <f:convertDateTime pattern="dd/MM/yyyy"/>
				        </h:inputText>	
				    </div>
				      		
				    <div class="inputLinha">
						<label>Data de saída:</label>
						<h:inputText value="#{reservarAction.dataSaida}" id="ate" styleClass="validate[required] text-input datepicker">
				            <f:convertDateTime pattern="dd/MM/yyyy"/>
				        </h:inputText>
					</div>
					
					<label>Email do cliente:</label>
				    <h:inputText value="#{reservarAction.email}" id="emailUsuario" styleClass="validate[required, custom[email]] emailUsuario"/>
				    
				    <a id="usuarioNaoCadastrado" title="Clique aqui caso o usuário não esteja cadastrado no sistema">
				  		Usuário não cadastrado
				    </a>
				</div>
				
				<div id="camposCadastrarUsuario" class="usuarioTemCadastro">
								<div class="inputs">
									<label>Nome:</label>
			            	  		<h:inputText value="#{cadastrarUsuario.hospede.nome}" id="nome" styleClass="validate[required] text-input"/>
			            	  		
			            	  		<label>CPF:</label>
			            	  		<h:inputText value="#{cadastrarUsuario.hospede.CPF}" id="cpf" styleClass="validate[required,custom[cpf]] text-input" />
			            	  		
			            	  		<label>RG:</label>
			            	  		<h:inputText value="#{cadastrarUsuario.hospede.RG}" id="rg" maxlength="11" styleClass="validate[required, custom[rg]] text-input" />
			            	  		
			            	  		<label>Data de Nascimento:</label>
			            	  		<h:inputText value="#{cadastrarUsuario.hospede.dataNascimento}" id="dataNascimento" styleClass="validate[required, funcCall[checarIdade]] text-input datepicker">
			            	  			<f:convertDateTime pattern="dd/MM/yyyy"/>
			            	  		</h:inputText>	
		            	  		</div>
								
								
								<div class="inputs">
									<div class="inputLinha menor primeiro">
										<label>Pais:</label>
						      			<h:inputText value="#{cadastrarUsuario.hospede.endereco.pais}" id="pais" styleClass="validate[required]"/>
				         	  		</div>
				         	  		
				         	  	<div class="inputLinha maior">
						      		<label>Estado:</label>
						      		<h:selectOneMenu id="estadoInput"
										disabled="#{cadastrarUsuario.hospede.endereco.isDiferenteBrasil()}"
										value="#{cadastrarUsuario.hospede.endereco.estado}" effect="fade" style="margin-bottom: 2%" styleClass="inputCampos validate[required]">
										<f:selectItem itemLabel="Selecione..." />
										<f:selectItems value="#{cadastrarUsuario.estados}" var="estado"
										itemLabel="#{estado}" itemValue="#{estado}" />				
									</h:selectOneMenu>
						      	</div>
		            	  		
		            	  		<label>Cidade:</label>
		            	  		<h:inputText value="#{cadastrarUsuario.hospede.endereco.cidade}" id="cidade" styleClass="validate[required] text-input"/>
		            	  		
		            	  		<label>CEP</label>
		            	  		<h:inputText value="#{cadastrarUsuario.hospede.endereco.CEP}" id="cep" styleClass="validate[required, custom[cep]]"/>
		            	  		
		            	  		<div class="inputLinha maior primeiro">
				         	  		<label>Rua:</label>
				         	  		<h:inputText value="#{cadastrarUsuario.hospede.endereco.logradouro}" id="rua" styleClass="validate[required] text-input"/>
			         	  		</div>
									
									<div class="inputLinha menor">		            	  		
				         	  		<label>Número:</label>
				         	  		<h:inputText value="#{cadastrarUsuario.hospede.endereco.numero}" id="numero" styleClass="validate[required, custom[integer]]"/>
									</div>
		            	  	</div>
		            	  	
		            	  	<div class="inputs">
									<label>Telefone:</label>
		            	  		<h:inputText value="#{cadastrarUsuario.hospede.telefone}" id="telefone" styleClass="validate[required, custom[integer]]"/>
		            	  		
		            	  		<label>Email:</label>
		            	  		<h:inputText value="#{cadastrarUsuario.hospede.email}" id="email" styleClass="validate[required, custom[email]]"/>
		            	  	
		            	  	</div>
				</div>
                	  		<h:commandButton action="#{reservarAction.consolidar}" value="Confirmar" id="botaoCadastrar" style="clear: both;"/>
                  		</h:form>
		</div>


		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/formulario/mascara/mascaraForm.js" ></script>

		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/calendario/calendario.js" ></script>

		<script type="text/javascript">
			$(function(){	
				$("form#formReserva").validationEngine();
				$("form#formCadastrarQuarto").validationEngine();
				
				$("input[id='formReserva:de']").mask("99/99/9999");
				$("input[id='formReserva:ate']").mask("99/99/9999");
				
				$( "[id='formReserva:de']" ).datepicker({
		            //defaultDate: "+1w",
		            minDate: "0D",
		            changeMonth: true,
		            numberOfMonths: 3,
		            onClose: function( selectedDate ) {
		            	selectedDate = selectedDate.split("/");
		            	selectedDate[0] = parseInt(selectedDate[0]) + 1;
		                $( "[id='formReserva:ate']" ).datepicker( "option", "minDate", selectedDate.join("/"));
		            }
		        });
		        
		        $( "[id='formReserva:ate']" ).datepicker({
		            //defaultDate: "+1w",
		            changeMonth: true,
		            numberOfMonths: 3,
		            onClose: function( selectedDate ) {
			            if(parseInt(selectedDate.split("/")[0])){
			            	selectedDate = selectedDate.split("/");
			            	selectedDate[0] = parseInt(selectedDate[0]) - 1;
			            	$( "[id='formReserva:de']" ).datepicker( "option", "maxDate", selectedDate.join("/"));
			            }
		            }
		        });

		        habilitarDesabilitarCadastroUsuario(false);
	        	
		        $("a#usuarioNaoCadastrado").on("click", function(){
			        if($("div#camposCadastrarUsuario").css("display") == "none"){
						$(this).text("Fechar formulário de cadastro");
						$(this).addClass("formAberto");
				        
						habilitarDesabilitarCadastroUsuario(true);
			        }
			        else{
						$(this).text("Usuário não cadastrado");
						$(this).removeClass("formAberto");
				        
						
						habilitarDesabilitarCadastroUsuario(false);
					}
			    });

			    $(window).unbind("scroll");
			});

			function habilitarDesabilitarCadastroUsuario(valor){
				$("div#camposCadastrarUsuario input").each(function(){
					if(valor){
						$(this).removeAttr("disabled");
						$("input.emailUsuario").attr("disabled", "true");
						$("input.emailUsuario").val("");
						
						$("div#camposCadastrarUsuario").slideDown();

						$("div#camposCadastrarUsuario input:first").focus();
						$("input.emailUsuario").validationEngine("hide");
					}
					else{
						$(this).attr("disabled", "true");
						$(this).val("");

						$("form#formReserva").validationEngine("hideAll");
						$("div#camposCadastrarUsuario").slideUp();
						
						$("input.emailUsuario").removeAttr("disabled");
					}
				});
			}
		</script>
		
		<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/public/stylesheets/validacao/validacao.css" />
		<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/public/stylesheets/validacao/validacaoForm.css" />
		<style type="text/css">
			header nav{
				width: 70%;
			}
			
			div.divForm form div.dadosReserva{
				width: 40%
			}
			
			div.divForm form div.dadosReserva .inputLinha{
				width: 40% !important;
			}
			
				div.divForm form div.dadosReserva input.emailUsuario{
					width: 50%;
				}
				
				div.divForm form div.dadosReserva a#usuarioNaoCadastrado{
					width: auto;
					float: right;
					
					padding-top: 0.6em;
					font-size: 0.9em;
					cursor: pointer;
				}
				
				
				div.divForm form div.dadosReserva a#usuarioNaoCadastrado:hover{
					border-bottom: 1px dotted #1560C3;
				}
			
			a.formAberto{
				color: #DD4B39;
				border-bottom-color: #DD4B39 !important;
			}
			
			.usuarioTemCadastro{
				display: none;
			}
						
		</style>

	</ui:define>


</ui:composition>